import React, { useState } from 'react'
import { Button, Table, Image, Space, Switch } from 'antd'
import { useMount, useSize } from 'ahooks'
import { getSeckillList, updateFlag, getCategory } from './../../api/pro'
import './index.css'
function SeckillList() {
  const size = useSize(document.getElementById('content'))
  // console.log(size)
  const [proList, setProList] = useState([])
  useMount(() => {
    getSeckillList().then(res => {
      setProList(res.data.data)
    })
  })
  const [category, setCategory] = useState([])

  useMount(() => {
    getCategory().then(res => {
      // console.log(res.data.data)
      const arr = []
      res.data.data.forEach(item => {
        arr.push({
          text: item,
          value: item
        })
      })
      setCategory(arr)
    })
  })
  const columns = [
    {
      title: '序号',
      width: '100px',
      align: 'center',
      fixed: 'left',
      render (text, record, index) { return <span>{ (current - 1) * pageSize + index + 1 }</span>}
    },
    {
      title: '产品名称',
      width: '280px',
      align: 'center',
      fixed: 'left',
      dataIndex: 'proname'
    },
    {
      title: '图片',
      width: '120px',
      align: 'center',
      dataIndex: 'img1',
      fixed: 'left',
      render (text) {
        return <Image src = {text} style ={{ width: 90, height: 90 }} />
      }
    },
    {
      title: '分类',
      width: '120px',
      align: 'center',
      dataIndex: 'category',
      filters: category,
      onFilter: (value, record) => record.category.indexOf(value) !== -1
    },
    {
      title: '品牌',
      width: 120,
      align: 'center',
      dataIndex: 'brand'
    },
    {
      title: '原价',
      width: '120px',
      align: 'center',
      dataIndex: 'originprice',
      sorter: (a, b) => a.originprice - b.originprice
    },
    {
      title: '折扣',
      width: '120px',
      align: 'center',
      dataIndex: 'discount',
      sorter: (a, b) => a.discount - b.discount
    },
    {
      title: '销量',
      width: 120,
      align: 'center',
      dataIndex: 'sales',
      sorter: (a, b) => a.sales - b.sales
    },
    {
      title: '库存',
      width: 120,
      align: 'center',
      dataIndex: 'stock',
      sorter: (a, b) => a.stock - b.stock
    },
    {
      title: '是否秒杀',
      width: 140,
      align: 'center',
      fixed: 'right',
      dataIndex: 'isseckill',
      render (text, record) {
        return <Switch className="seckillSwitch" 
        checked = { text === 1 }
        onChange = { (checked) => {
          updateFlag({
            proid: record.proid,
            type: 'isseckill',
            flag: checked
          }).then(() => {
            getSeckillList().then(res => {
              setProList(res.data.data)
            })
          })
        }}
        />
      }
    },
    {
      title: '操作',
      width: 200,
      align: 'center',
      fixed: 'right',
      render (text, record, index) {
        return (
          <Space>
            <Button type="dashed">编辑</Button>
            <Button type="danger">删除</Button>
          </Space>
        )
      }
    },
  ]
  const [current, setCurrent]=useState(1) // 默认的页数

  const [pageSize, setPageSize]=useState(10) // 默认显示10条数据

  
  return (
    <Table 
    dataSource = { proList } 
    columns = { columns } 
    rowKey="proid" 
    scroll={{ x: 1500, y: size.height - 140 }}
    pagination = { {
      position: ['bottomLeft'], // 分页器出现的位置，可以是多个
      onChange (page, pageSize) {
        setCurrent(page)
        setPageSize(pageSize)
      },
      pageSizeOptions: ['10', '40', '100', '150'],
      showTotal: (total) => {return '共有' + total + '条数据'},
      showQuickJumper: true
    } }
    />
  )
}

export default SeckillList
